import React from 'react';
import xj from './audio/xj.mp3';
import heshang from './heshang.jpg';
import './styles.scss'





class PlayVideo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { writingMode: "vertical-rl", rote: '', target: '', explain: '', defaultColor: '',defaultBGColor:'' };
    }

    startPlay = () => {
        // this.setState({
        //     imgUrl: this.props.gif,
        //     btnShow: false
        // })
        const audioElement = document.getElementById("xinjing");
        let isPlaying = false;
        if (isPlaying) {
            audioElement.pause();
            isPlaying = false;
            this.setState({
                rote: ''
            })
        } else {
            if (audioElement.paused) {
                audioElement.play();
                this.setState({
                    rote: 'spin'
                })
            } else {
                audioElement.pause();
                this.setState({
                    rote: ''
                })
            }
            isPlaying = true;
        }


        // audioElement.onended = () => {
        // setTimeout(() => {
        //     this.setState({
        //         imgUrl: this.props.cover,
        //         btnShow: true
        //     })
        // }, 2000)
        // }

    }
    switch = (writingMode, i) => {
        this.setState({
            writingMode
        });

        const btn = document.querySelectorAll('.btn');

        for (let k = 0; k <= btn.length; k++) {
            if (k === i) {
                btn[i].style.color = '#2e8555';
            } else {
                btn[k].style.color = '';
            }
        }
    }
    contentClick(e) {
        const targetId = e.target.id;
        const targetElem = document.querySelector('#' + targetId);
        const yuanwen = document.querySelectorAll('.yuanwen');
        for (let k of yuanwen) {
            if (k.id === targetId) {
                // k.style.backgroundColor = '#2e8555';
                k.style.backgroundColor = '#24365E';
                // k.style.color = '#fff';
                k.style.color = '#FFD700';
                if (k.id === this.state.target) { // 已点击过一次
                    this.setState({
                        target: '',
                        explain: ''
                    });
                    k.style.backgroundColor = this.state.defaultBGColor;
                    k.style.color = this.state.defaultColor;
                } else {
                    this.setState({
                        target: targetId,
                        explain: e.target?.dataset?.explain
                    });
                }
            } else {
                k.style.backgroundColor = this.state.defaultBGColor;
                k.style.color = this.state.defaultColor;
            }
        }


    }
    componentDidMount() {
        // this.switch('vertical-rl',0)
        window.addEventListener('load',  () => {
            const element = document.querySelector('.yuanwen');
            // 获取计算样式  
            var computedStyle = window.getComputedStyle(element);
            // 获取字体颜色  
            var defaultColor = computedStyle.getPropertyValue('color');
            var defaultBGColor = computedStyle.getPropertyValue('background-color');
            this.setState({
                defaultColor,
                defaultBGColor
            })
        })

    }
    render() {
        return (
            <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', cursor: 'pointer' }}>
                    <div>
                        <div onClick={() => this.switch('vertical-rl', 0)} className='btn' style={{ color: '#2e8555' }}>竖排-从右至左</div>
                        <div onClick={() => this.switch('horizontal-tb', 1)} className='btn'>横排-从左至右</div>
                    </div>
                    <div onClick={this.startPlay} className={[this.state.rote]}
                        style={{
                            width: '50px', height: '50px', lineHeight: '50px',
                            color: '#fff', fontSize: '1.4em', borderRadius: '50%',
                            backgroundImage: `url(${heshang})`, backgroundSize: 'contain', textAlign: 'center'
                        }}>
                        {/* <audio src={"./audio/xj.mp3"} id="xinjing"></audio> */}
                        <audio id='xinjing' src={xj} loop></audio>
                    </div>
                </div>
                {
                    this.state.explain.length ? <div style={{ border: '1px solid #ccc', padding: '5px 10px', marginTop: 20 }}>本句含义：{this.state.explain}</div> : ''
                }

                <div
                    style={{
                        position: 'relative',
                        writingMode: this.state.writingMode,
                        width: "100%",
                        height: "calc(100vh - 300px)",
                        fontSize: "1.54em",
                        overflow: "auto",
                        padding: "20px",
                    }}
                >
                    {/* <div onClick={(e) => this.contentClick(e)} id='box-9832l' className='cssanimation sequence leMovingBackFromRight'> */}
                    <div onClick={(e) => this.contentClick(e)} id='box-9832l' className=''>
                        <span id='a-0' className='yuanwen' data-explain="">观自在菩萨，行深般若波罗蜜多时， 照见五蕴皆空，度一切苦厄。</span>
                        <span id='a-1' className='yuanwen' data-explain="">舍利子，色不异空，空不异色；色即是空，空即是色。 受想行识，亦复如是。</span>
                        <span id='a-2' className='yuanwen' data-explain="">舍利子，是诸法空相，不生不灭，不垢不净，不增不减，是故空中无色，无受想行识；无眼耳鼻舌身意；无色声香味触法；</span>
                        <span id='a-4' className='yuanwen' data-explain="">无眼界，乃至无意识界; 无无明，亦无无明尽; 乃至无老死，亦无老死尽。</span>
                        <span id='a-6' className='yuanwen' data-explain="">无苦集灭道，无智亦无得。以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍，无挂碍故。无有恐怖。 远离颠倒梦想，究竟涅槃。</span>
                        <span id='a-7' className='yuanwen' data-explain="">三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。</span>
                        <span id='a-8' className='yuanwen' data-explain="">故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。</span>
                        <span id='a-9' className='yuanwen' data-explain="">故说般若波罗蜜多咒，即说咒曰：揭谛揭谛、波罗揭谛，波罗僧揭谛，菩提娑婆诃。</span>
                    </div>
                </div>
                <div style={{ marginTop: '60px' }}>
                    <table border="1">
                        <tr>
                            <th>佛教术语</th>
                            <th>含义</th>
                        </tr>
                        <tr>
                            <td colSpan={2} style={{ textAlign: 'center' }}>五蕴 </td>
                        </tr>
                        <tr>
                            <td>蕴 </td>
                            <td>指的是构成人类存在和心智体验的五个基本方面或要素。每个蕴代表了一个特定方面的体验或存在，这些方面共同构成了个体的现实。</td>
                        </tr>
                        <tr>
                            <td>色蕴（Rupa）</td>
                            <td>色蕴指的是身体和物质的存在，包括五官感觉、身体的形状和物质实体。它强调了身体和外部世界的物质性质。</td>
                        </tr>

                        <tr>
                            <td>受蕴（Vedana）</td>
                            <td>受蕴是感觉的蕴，包括对感觉的体验，如愉悦、痛苦或中性。这是与感觉和情感相关的蕴。</td>
                        </tr>

                        <tr>
                            <td>想蕴（Sanna）</td>
                            <td>想蕴是感知和认知的蕴，包括对事物的观察、辨别和识别。这涉及思考和知觉的过程。</td>
                        </tr>

                        <tr>
                            <td>行蕴（Sankhara）</td>
                            <td>行蕴是有关个体习惯、倾向和意愿的蕴，包括了情感、欲望、动机和行为。它是人类行为和性格的基础。</td>
                        </tr>

                        <tr>
                            <td>识蕴（Vijnana）</td>
                            <td>识蕴是意识和知觉的蕴，使我们能够感知和理解世界。它包括了智慧和思维的过程。</td>
                        </tr>

                        <tr>
                            <td>般若波罗蜜多</td>
                            <td>代表智慧</td>
                        </tr>
                    </table>
                </div>
            </div>
        )
    }

}

// PlayVideo.defaultProps = {
//     width: '20px',
//     height: '20px',
//     id: `audio${new Date().getTime()}`,
//     imgId: `img${new Date().getTime()}`
// }

export default PlayVideo;



// 当然，以下是对《心经》全文的逐句白话解释，希望能够帮助您更好地理解这部经典。

// 观自在菩萨，行深般若波罗蜜多时，照见五蕴皆空，度一切苦厄。
// 解释：观自在菩萨在修行深般若波罗蜜多(超越生死轮回苦海，到达不生不灭的究竟解脱的境界)的时候，洞察到五蕴（色:物质、受:感受、想:思想、行:行为、识:认识，对万物的识别）都是空无的，因此能够度过一切苦难和困境。

// 舍利子，色不异空，空不异色，色即是空，空即是色，受想行识，亦复如是。
// 解释：舍利子啊(舍利子是佛陀的弟子之一，这里可以指众生)，物质与空并无二致，空也不异于物质。物质就是空，空就是物质。同样地，感受、想象、行为、意识也都是如此，没有实质性的存在。

// 舍利子，是诸法空相，不生不灭，不垢不净，不增不减。
// 解释：舍利子啊，一切法都是空的表象，它们没有生灭、没有垢净、没有增减。这是因为它们没有自性，都是因缘和合而生的。

// 是故空中无色，无受想行识，无眼耳鼻舌身意，无色声香味触法，无眼界，乃至无意识界。
// 解释：因此，在空的境界中，没有物质现象，也没有感受、想象、行为、意识等心理活动。没有眼耳鼻舌身意等感官，也没有色声香味触法等外界对象。没有眼界乃至意识界的分别。

// 无无明，亦无无明尽，乃至无老死，亦无老死尽。无苦集灭道，无智亦无得。
// 解释：在空的境界中，没有无明（愚昧），也没有无明的尽头。乃至没有老和死，也没有老和死的尽头。没有苦集灭道（四谛）的分别，也没有智慧和所得的概念。

// 以无所得故，菩提萨埵，依般若波罗蜜多故，心无挂碍，无挂碍故，无有恐怖，远离颠倒梦想，究竟涅槃。
// 解释：因为没有什么可以得到的，所以菩提萨埵（觉悟者）依靠般若波罗蜜多（智慧之法）修行，心中没有挂碍和执着。由于没有挂碍，就没有恐惧和颠倒的梦想。最终能够达到涅槃（解脱）的境界。

// 三世诸佛，依般若波罗蜜多故，得阿耨多罗三藐三菩提。
// 解释：过去、现在、未来的所有佛陀，都是因为修行般若波罗蜜多而得到阿耨多罗三藐三菩提（无上正等正觉）。

// 故知般若波罗蜜多，是大神咒，是大明咒，是无上咒，是无等等咒，能除一切苦，真实不虚。
// 解释：因此我们知道，般若波罗蜜多是最伟大的神咒、最明亮的神咒、无上的神咒、无与伦比的神咒。它能够消除一切苦难，这是真实不虚的。




// 当然，以下是对上面解释中出现的佛教术语的解释：

// 五蕴：指色、受、想、行、识。它们是构成人身的五种要素，同时也是构成一切有为法的五种要素。其中，“色”是指物质，“受”是指感受，“想”是指想象或概念，“行”是指意志或行为，“识”是指意识。
// 般若波罗蜜多：意为“智慧到彼岸”，是佛教修行的一种境界和方法。它指的是通过智慧来超越生死轮回，达到解脱的境界。
// 舍利子：舍利弗的尊称，他是佛陀十大弟子之一，以智慧著称。
// 空：是佛教中的一个核心概念，指的是一切现象都是因缘和合而生，没有固定不变的自性。即万物都是空的，没有永恒不变的本质。
// 诸法空相：指一切事物和现象都是空的表象，没有实体存在。
// 涅槃：是佛教修行的最高目标，意为解脱、圆寂。指的是超越生死轮回，达到永恒寂静的境界。
// 阿耨多罗三藐三菩提：意为“无上正等正觉”，是佛陀的最高智慧境界。这是佛教修行者的终极目标，代表完全觉悟和智慧。
// 神咒：在佛教中，神咒通常是一种特殊的语言或音节组合，被认为具有特殊的力量，能够祈求平安、消灾解难等。
// 这些术语都是佛教中的基本概念，理解了这些概念，就能更好地理解佛教教义和《心经》的含义。


// 色、受、想、行、识是佛教用语，指的是五蕴理论中的五蕴。
// 五蕴理论是佛教对众生身心现象的分类，将人的身体分为色、受、想、行、识五个部分。
// 其中，“色”指的是身体的外在物质，包括物质的各种形态和颜色；“受”指的是感觉和知觉，包括感觉、知觉、情绪等心理现象；“想”指的是思维和观念，包括知觉、概念、判断等；“行”指的是行为和动作，包括身体的活动和思维的过程；“识”指的是知觉和认识，包括知觉、意识、智力等。
// 这些概念在佛教中用来描述人的身心现象和特征，帮助人们更好地理解自己的思想和行为，以及认识自己的内在世界。









// 天干地支，简称为干支，源自中国远古时代对天象的观测。十干是指阏逢、旃蒙、柔兆、强圉、著雍、屠维、上章、重光、玄黓、昭阳。十二支是指困敦、赤奋若、摄提格、单阏、执徐、大荒落、敦牂、协洽、涒滩、作噩、阉茂、大渊献。

// 简化后的天干地支：“甲、乙、丙、丁、戊、己、庚、辛、壬、癸”称为十天干，“子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥”称为十二地支。

// 十天干和十二地支依次相配，组成六十个基本单位，两者按固定的顺序相互配合，组成了干支纪元法。天干地支的发明影响深远，依旧在使用天干地支，用于历法、术数、计算、命名等各方面。


// 一刻钟等于15分钟。在我国古代，一天被划分为十二个时辰，每个时辰相当于现代的两个小时。而每个时辰又被分为八刻，因此一刻钟约为15分钟。
// 23-1 子时；
// 1-3 丑时；
// 3-5 寅时；

// 5-7 卯时；

// 7-9 辰时；

// 9-11 巳时；

// 11-13 午时；

// 13-15 未时；

// 15-17 申时；

// 17-19 酉时；

// 19-21 戌时；

// 21-23 亥时。